<template>
  <el-container>
    <el-header>
      <img src="@/assets/logo.png" @click="toHome" />
      <el-button type="success" @click="test">个人中心</el-button>
    </el-header>
    <el-container>
      <el-aside :width="collapse ? '64px' : '200px'">
        <div @click="openClose" class="openClose">
          <span>| | |</span>
        </div>
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          text-color="#fff"
          :unique-opened="true"
          :collapse="collapse"
          :collapse-transition="false"
          :router="true"
        >
          <el-sub-menu v-for="item in navList" :index="item.id + ''" :key="item.id">
            <template #title>
              <i class="iconfont" :class="item.icon"></i>
              <span>{{ item.nav_list }}</span>
            </template>
            <el-menu-item
              v-for="subItem in item.children"
              :index="'/' + subItem.path"
              :key="subItem.id"
            >
              <template #title>
                <i class="iconfont" :class="subItem.icon"></i>
                <span>{{ subItem.nav_list }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import data from './userList'
// interface routerDate {
//   path: string,
//   id: string
// }
export default defineComponent({
  name: 'Home',
  components: {
  },
  setup () {
    // console.log(data.navList)
    const navList = ref(data.navList)
    const router = useRouter()
    onMounted((): void => {
      // console.log(router.currentRoute.value.query.id) // 获取传入的参数
    })
    const test = (): void => {
      router.push({
        path: '/about',
        query: {
          id: '123'
        }
      })
    }
    // 返回首页
    const toHome = (): void => {
      router.push({
        path: '/about'
      })
    }
    // 控制菜单栏的收缩
    const collapse = ref(false)
    const openClose = (): void => {
      collapse.value = !collapse.value
    }
    return {
      test,
      toHome,
      navList,
      openClose,
      collapse
    }
  }
})
</script>
<style lang="scss">
@import "./welcome.scss";
</style>
